<template>
  <div class="home">
    <b-nav title="首页"> </b-nav>
    <div class="body">
      <div v-for="item in dataList" :key="item.id" class="list_style" @click="goDetials(item.name)">
        <div class="img_box">
          <img src="../assets/images/headImg1.jpg" alt="" class="imags" />
        </div>
        <div class="title_box">
          <div class="title_boxname">{{ item.name }}</div>
          <div class="cintent">
            {{ item.content }}
          </div>
        </div>
        <div class="date_style">
          {{ item.date }}
        </div>
      </div>
    </div>
    <b-footer v-model="content"> </b-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList:[],
      content:'hahah'
    };
  },
  methods: {
    getInitData() {
      
      this.dataList= [
        {
          id: 1,
          img:
            "file:///Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",
          name: "李四",
          date: "上午9:20",
          content: "好的",
        },
        {
          id: 2,
          img:
            "Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "张三",
          date: "昨天9:20",
          content: "ok",
        },
        {
          id: 3,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "王二麻子",
          date: "昨天",
          content:
            "王二麻子：就撒谎的就是曾经的失败v能及时的回复就是个发u是对肌肤产生的",
        },
        {
          id: 4,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "赵四",
          date: "周一",
          content: "嗯呢",
        },
        {
          id: 5,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "李易峰",
          date: "周一",
          content: "回家",
        },
        {
          id: 6,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "周杰伦",
          date: "周一",
          content: "ahduahsdu",
        },
        {
          id: 7,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "周冬雨",
          date: "周一",
          content: "ahduahsdu",
        },
        {
          id: 8,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "四小龙四小龙四小龙四小龙四小龙四小龙四小龙四小龙四小龙四小龙",
          date: "周日",
          content: "ahduahsdu",
        },
        {
          id: 9,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "赵薇",
          date: "4月25",
          content: "aaaaa",
        },
        {
          id: 10,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "杨紫",
          date: "4月23",
          content: "哈哈哈",
        },
        {
          id: 11,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "李光洙",
          date: "3月21",
          content: "哈哈哈",
        },
        {
          id: 12,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "haha",
          date: "2020年4月20",

          content: "哈哈哈",
        },
        {
          id: 13,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",

          name: "宋智孝",
          date: "2020年4月23",
          content: "哈哈哈",
        },
        {
          id: 14,
          img:
            "/Users/mengxianwei/studyworkspace/vuedemoone/src/assets/images/headImg.png",
          name: "刘在石",
          date: "2020年2月23",
          content: "哈哈哈",
        },
      ]
    },
    goDetials(name){
      this.$router.push({
        path:'/chat',
        query:{
          name:name
        }
      })
    },
  },
  mounted() {
    this.getInitData();
  },
};
</script>

<style lang='scss' scoped>
.list_style {
  height: 50px;
  background: white;
  border-bottom: #ebebeb 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  .img_box {
    margin: 0px 20px;
    .imags {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .title_box {
    width: 50%;
    .title_boxname {
      width: 95%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
    }
    .cintent {
      font-size: 10px;
      color: #666666;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .date_style {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    padding: 0px 10px;
    font-size: 10px;
    color: #666666;
  }
}

.body {
  height: calc(100vh - 124px);
  overflow: scroll;
}
</style>